<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增邮件记录')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include::bootstrap-select-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-email-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">接收者邮箱：</label>
                <div class="col-sm-8">
                    <input name="toEmail" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">主题：</label>
                <div class="col-sm-8">
                    <input name="subject" class="form-control" type="text">
                </div>
            </div>
           <div class="form-group" th:with="type=${@dict.getType('message_mail_type')}">
                <label class="col-sm-3 control-label">邮件类型：</label>
                <div class="col-sm-8">
                    <div class="radio check-box" th:each="dict : ${type}">
                        <label>
                            <input type="radio"  th:value="${dict.dictValue}" th:checked="${dict.dictValue}==0" name="emailType"> <i></i><span th:text="${dict.dictLabel}">文本</span></label>
                    </div>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">内容：</label>
                <div class="col-sm-8">
                    <input name="content" class="form-control" type="text">
                    <div id="tem_box" style="display:none">
                    <select class="selectpicker" id="chooseTem">
                    </select>
                        <div id="json-div" style="padding-top: 10px">

                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">抄送用户：</label>
                <div class="col-sm-8">
                    <input name="copyTo" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">密送用户：</label>
                <div class="col-sm-8">
                    <input name="bccTo" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">邮件用途：</label>
                <div class="col-sm-8">
                    <input name="emailUse" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class=" col-sm-3 control-label">简单示例</label>
                <div class="col-sm-8">
                    <input class="file" type="file" name="multipartFile" multiple data-min-file-count="1" id="file-input"  data-theme="fas">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <th:block th:include="include::bootstrap-select-js"/>
    <script type="text/javascript">
        var prefix = ctx + "message/email";
        $('#file-input').fileinput('refresh',{
            //初始化上传文件框
            language: "zh",//配置语言
            theme:"fas",
            showUpload : true, //显示整体上传的按钮
            showRemove : true,//显示整体删除的按钮
            uploadAsync: true,//默认异步上传
            uploadLabel: "上传",//设置整体上传按钮的汉字
            removeLabel: "移除",//设置整体删除按钮的汉字
            uploadClass: "btn btn-primary",//设置上传按钮样式
            showCaption: true,//是否显示标题
            dropZoneEnabled: true,//是否显示拖拽区域
            uploadUrl: prefix+'/uploadAttachFile',//这个是配置上传调取的后台地址
            maxFileSize : 9999,//文件大小限制kb
            maxFileCount: 9999,//允许最大上传数，可以多个，
            enctype: 'multipart/form-data',
            allowedFileExtensions : ["jpg", "png","gif","docx","zip","tar","xlsx","txt"],/*上传文件格式限制*/
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            showBrowse: true,
            browseOnZoneClick: true,
            //上传前回调
            slugCallback : function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
 });

        var uploadSuccsee={};
        //上传成功后回调
        $('#file-input').on('fileuploaded', function(event, data, previewId, index) {
            var response = data.response;
            if (response.code===0)
            {
            uploadSuccsee[previewId]=data.response.msg;
            }
            console.log(uploadSuccsee);
        });

     $('#file-input').on('filesuccessremove', function(event,id ,index) {
         delete  uploadSuccsee[id];
      });
        $("#file-input").on("filecleared",function(event, data, msg){
            uploadSuccsee={};
        });
        $("#form-email-add").validate({
            focusCleanup: true
        });



        var templatePrefix = ctx + "system/template";
        //模板id
        var indeId;

        function initTemplate(){
        $("#chooseTem").selectpicker({ width: 'auto', liveSearch: true,liveSearchPlaceholder: "数据检索" });
        $.get(templatePrefix+"/listTemNameId",function(data,status){
            $("#chooseTem").empty();
            $.each(data.data,function(i,e){//i是索引，e是json对象
                if(e==null)
                {
                    return;
                }
                var indexg=e.lastIndexOf("_"),lngy=e.length;
                $("#chooseTem").append("<option value="+e.substring(0,indexg) +">"+e.substring(indexg+1,lngy)+"</option>");
            });
            $("#chooseTem").selectpicker("refresh");
        });

        $("#chooseTem").on('changed.bs.select',function(e, clickedIndex, isSelected, previousValue){
            indeId=$(e.currentTarget[clickedIndex]).val();
            $.get(templatePrefix+"/getTemJson/"+indeId,function(data,status){
                $("#json-div").empty();
                $.each(JSON.parse(data.data),function(i,e){//i是索引，e是json对象
                    if(e==null)
                    {
                        return;
                    }
                    var df=	'<div class="form-group">'+
                        '<label class="col-sm-3 control-label is-required">'+e+'</label>'+
                        '<div class="col-sm-8">'+
                        '<input class="form-control" type="text" name="params['+i+']" >'+
                        '</div>'+
                        '</div>';
                    $("#json-div").append(df);
                    //console.log(i+"_"+e);
                });
            });
        });
        }

        $('input[name="emailType"]').on('ifChecked', function(event) { //ifCreated 事件应该在插件初始化之前绑定
            if ($(event.target).val()==1)
            {$("#tem_box").show();
            $('input[name="content"]').hide();
                initTemplate();
            }
            else {
                $("#chooseTem").empty();
                $("#json-div").empty();
                $("#tem_box").hide();
                $('input[name="content"]').show();
            }
        });

        function submitHandler() {
            if ($.validate.form()) {
             var data= $('#form-email-add').serializeArray();
             if($('input[name="emailType"]:checked').val()==1)
             {
                 data.push( {"name": "params[templateId]", "value": indeId});
             }
             var ats=[];
               for (var key in uploadSuccsee)
                {
                    ats.push(uploadSuccsee[key])
                }
               data.push( {"name": "attachFilePath", "value": ats.join(";")});
               console.log(data);

                $.operate.save(prefix + "/add", data);
            }
        }
    </script>
</body>
</html>